import React, { Component } from "react";
import {
  Card,
  Table,
  Button,
  Input,
  Menu,
  Dropdown,
  Icon,
  Modal,
  Select,
  Checkbox,
} from "antd";
import LinkButton from "../../../components/link-button/index";
const { Option } = Select;
const { Search } = Input;
class home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      visible1: false,
      visible2: false,
      visible3: false,
    };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  hideModal = () => {
    this.setState({
      visible: false,
    });
  };
  showModal1 = () => {
    this.setState({
      visible1: true,
    });
  };

  hideModal1 = () => {
    this.setState({
      visible1: false,
    });
  };
  showModal2 = () => {
    this.setState({
      visible2: true,
    });
  };

  hideModal2 = () => {
    this.setState({
      visible2: false,
    });
  };
  showModal3 = () => {
    this.setState({
      visible3: true,
    });
  };

  hideModal3 = () => {
    this.setState({
      visible3: false,
    });
  };
  render() {
    const menu = (
      <Menu>
        <Menu.Item>
          <LinkButton onClick={this.showModal}>强制下线</LinkButton>
        </Menu.Item>
        <Menu.Item>
          <LinkButton onClick={this.showModal1}>有效管理</LinkButton>
        </Menu.Item>
        <Menu.Item>
          <LinkButton onClick={this.showModal2}>ip下发</LinkButton>
        </Menu.Item>
        <Menu.Item>
          <LinkButton onClick={this.showModal3}>合规检测</LinkButton>
        </Menu.Item>
      </Menu>
    );
    const columns = [
      {
        title: "资产名称",
        dataIndex: "name",
      },
      {
        title: "owner",
        dataIndex: "owner",
      },
      {
        title: "合规检测状态",
        dataIndex: "status",
      },
      {
        title: "组织架构",
        dataIndex: "chart",
      },
      {
        title: "资产类型",
        dataIndex: "type",
      },
      {
        title: "IP地址",
        dataIndex: "ip",
      },
      {
        title: "操作",
        dataIndex: "handle",
        render: () => (
          <div>
            <LinkButton
              onClick={() => this.props.history.push("/EquipmentAccess/detail")}
            >
              详情
            </LinkButton>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Dropdown overlay={menu}>
              <LinkButton
                className="ant-dropdown-link"
                onClick={(e) => e.preventDefault()}
              >
                更多
                <Icon type="down" />
              </LinkButton>
            </Dropdown>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <LinkButton
              onClick={() =>
                this.props.history.push("/EquipmentAccess/consequence")
              }
            >
              检测结果
            </LinkButton>
          </div>
        ),
      },
    ];
    const data = [
      {
        key: "1",
        name: "192.168.19.23",
        owner: "陈某",
        status: "未检测",
        chart: "缺省客户",
        type: "电脑端设备",
        ip: "192.168.19.23",
      },
      {
        key: "2",
        name: "192.168.19.52",
        owner: "郭某",
        status: "未检测",
        chart: "缺省客户",
        type: "电脑端设备",
        ip: "192.168.19.52",
      },
      {
        key: "3",
        name: "192.168.19.25",
        owner: "张某",
        status: "未检测",
        chart: "缺省客户",
        type: "电脑端设备",
        ip: "192.168.19.25",
      },
      {
        key: "3",
        name: "192.168.19.33",
        owner: "韩某",
        status: "未检测",
        chart: "缺省客户",
        type: "电脑端设备",
        ip: "192.168.19.33",
      },
    ];

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        name: record.name,
      }),
    };

    return (
      <Card>
        <div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <div>
              <Button>组织架构配置</Button>&nbsp;&nbsp;
              <Button>批量删除</Button>
            </div>
            <div>
              <Search
                placeholder="请输入资产名称"
                onSearch={(value) => console.log(value)}
                enterButton
              />
            </div>
          </div>
          <div style={{ marginTop: 10 }}>
            <Table
              rowSelection={rowSelection}
              columns={columns}
              dataSource={data}
            />
          </div>
        </div>
        <Modal
          title="强制下线"
          visible={this.state.visible}
          onOk={this.hideModal}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消"
        >
          <p>重连间隔：</p>
          <p>此操作将使该设备强制下线，并于设置时间内无法重新连接!</p>
          <p> 请确认您的操作。</p>
        </Modal>
        <Modal
          title="有效管理"
          visible={this.state.visible1}
          onOk={this.hideModal1}
          onCancel={this.hideModal1}
          okText="确认"
          cancelText="取消"
        >
          <p>
            <span>设备当前在线时间：</span>
            <Input style={{ width: 200 }} value="4小时30分钟" />
          </p>
          <p>
            <span>设置认证失效时间：</span>
            <Select style={{ width: "200px" }} defaultValue="一个小时">
              <Option value="Home">一个小时</Option>
              <Option value="Company">Company</Option>
            </Select>
          </p>
        </Modal>
        <Modal
          title="IP下发配置"
          visible={this.state.visible2}
          onOk={this.hideModal2}
          onCancel={this.hideModal2}
          okText="确认"
          cancelText="取消"
        >
          <div>
            <p>
              &nbsp;&nbsp;
              <Checkbox />
              &nbsp;&nbsp; 使用下面的IP地址
            </p>
            <p>
              <span>ip地址：</span>&nbsp;&nbsp;&nbsp;&nbsp;
              <Input style={{ width: 200 }} />
            </p>
            <p>
              <span>子网掩码：</span>
              <Input style={{ width: 200 }} />
            </p>
            <p>
              <span>默认网关：</span>
              <Input style={{ width: 200 }} />
            </p>
          </div>
          <div>
            <p>
              &nbsp;&nbsp;
              <Checkbox />
              &nbsp;&nbsp; 使用下面的DNS服务器地址
            </p>
            <p>
              <span>首选DNS服务器：</span>
              <Input style={{ width: 200 }} />
            </p>
            <p>
              <span>备用DNS服务器：</span>
              <Input style={{ width: 200 }} />
            </p>
          </div>
        </Modal>
        <Modal
          title="合规检测"
          visible={this.state.visible3}
          onOk={this.hideModal3}
          onCancel={this.hideModal3}
          okText="确认"
          cancelText="取消"
        >
          <div>
            <p>
              <span>选择合规策略：</span>
              <Select style={{ width: "200px" }} defaultValue="Home">
                <Option value="Home">终端设备策略：</Option>
                <Option value="Company">Company</Option>
              </Select>
            </p>
            <p>
              <span>合规检测时间：</span>
              <Select style={{ width: "200px" }} defaultValue="Home">
                <Option value="Home">立即执行</Option>
                <Option value="Company">Company</Option>
              </Select>
            </p>
          </div>
        </Modal>
      </Card>
    );
  }
}

export default home;
